---
title: Toggle Tip
description: Looks like a tooltip, but works like a popover.
---

<ExampleTabs name="toggle-tip-basic" />

## Setup

For ease of use, create a closed component composition for the `ToggleTip`
component.

<SnippetCode name="toggle-tip" />

Alternatively, you can add it to your project using the following command.

```sh
npx @chakra-ui/cli snippet add toggle-tip
```

The snippet includes a closed component composition for the `Popover` component.

## Usage

```jsx
import { InfoTip, ToggleTip } from "@/components/ui/toggle-tip"
```

```jsx
<ToggleTip content="...">
  <button />
</ToggleTip>
```

## Examples

### Info Tip

Use the `InfoTip` component to display an info tip. This component renders an
icon button with an info icon by default.

> Useful for landing pages to display additional information about a feature.

<ExampleTabs name="toggle-tip-info-tip" />

## Props

### Root

<PropTable component="Popover" part="Root" />
